<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="taglib" prefix="pln" %>

<h3><i class="gen-enclosed foundicon-tools"></i>Grilla de Pagina</h3>
<p class="note">Selecciona un tipo de grilla para tu pagina.</p>     

<span id="pageInfo" data-pageId="${page.id}" data-pageType="${page.pageType}"></span>
<div id="page_templates" class="layout-selector">
       <ul>
        	<c:forEach  items="${config.archiveTemplates}" var="template" varStatus="status">
        		<li id="template-${template}" data-template="${template}" class="${page.template eq template ? 'active' : ''}">
            		<img src="${pageContext.request.contextPath}/images/structure/${template}.jpg">
           			<input name="layout" type="radio" value="layout-${template}" ${page.template eq template ? 'checked' : ''} />
            	</li>
			</c:forEach>               
     	
       </ul>
                            
</div> 

<h3><i class="gen-enclosed foundicon-tools"></i>Categorias</h3>
<p class="note">Edita o crea una nueva categoria en tu catalogo.</p>   

<section class="header_categories">

<select class="form-control" name="" id="">
	<option value="">Editar una categoria</option>
	<option value="">Nombre de categoria 1</option>
	<option value="">Nombre de categoria 2</option>
	<option value="">Nombre de categoria 3</option>
</select>

<span id="new_category_button">
	<i class="general foundicon-add-doc"></i><a  data-toggle="modal" href="#new_category_modal" class="">Agregar nueva categoría</a>
</span>

</section>



<section class="container_items">
	
	<h4>Editando <strong>Nombre de la categoria seleccionada</strong></h4>
	
	<input class="form-control" id="name" name="name" type="text" placeholder="Nombre de la categoria" />
	<input class="form-control" id="tags" name="tags" type="text" placeholder="tags, tags, tags" />
				
	<div class="form-actions">
    	<button id="create_new_item" type="submit" class="btn">Crear un nuevo item</button>
	</div>

	<h4>Items de la categoria seleccionada</h4>

	<section id="new_items" class="new_items">
		<input class="form-control" id="name" name="name" type="text" placeholder="Nombre del articulo" />
		 <!--  hay que agregarle el rich text editor -->
		<textarea class="form-control" id="description" name="description"  placeholder="Descripcion del articulo"></textarea>
		<input class="form-control" id="price" name="price" type="text" placeholder="Precio / Valor" />
		<input class="form-control" id="code" name="code" type="text" placeholder="Código" />
		
		<button id="" type="submit" class="btn"><a  data-toggle="modal" href="#item_image_editor" class="">Imagenes del item</a></button>

	</section>

</section>

<!-- Table listado de Items para la Categoria seleccionada -->
		
		<table id='archive_table_archive1' width='100%' border='0' cellspacing='0' cellpadding='0' class='table table-striped'>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre del item ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre del item 2 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre del item 3 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
		</table>




<!-- Modal crear nueva categoria -->
  <div class="modal fade" id="new_category_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4>Crear una nueva categoría</h4>
        </div>
        <div class="modal-body page_selector_box">
			<div class="container">
				<input class="form-control"  id="id" name="id" type="hidden" value=""/>
				<input class="form-control" id="name" name="name" type="text" placeholder="Nombre de la categoria" />
				<input class="form-control" id="tags" name="tags" type="text" placeholder="Tags de la categoria" />
			</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" >Crear</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->


<!-- Modal editor de imagenes del item -->
  <div class="modal fade" id="item_image_editor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4>Agregar imagenes</h4>
        </div>
        <div class="modal-body page_selector_box">
		<section class="upload_post" id="upload_post" style="">
			<div id='imageContainer_archive1'>
				<div class="actions upload">
					<button class='uploder_button btn btn-default' id="archive_ub">SUBIR IMAGEN</button>
					<input class='fileupload' type='file' name='files[]' data-url='controller/upload.htm' data-uploaderid='archive1'>
					<div id='dropzone_archive1' class='dropzone'>Drop files here</div>
					<div id='error_msj_archive1' class='errror_msj'></div>
					<div id='progress_archive1' class='progress progress_bar'>
						<div class='bar' style='width: 0%;'></div>
					</div>
					<div id='uploaded-files_archive1' class='uploaded_file' data-key='archive' data-type='gallery'></div>
				</div>
			</div>
			<button class='btn btn-primary' data-uploaderid=''>Agregar</button>
		</section>
		
		<!-- Table listado de imagenes del item-->
		<h4>Listado de imagenes del item</h4>
		<table id='archive_table_archive1' width='100%' border='0' cellspacing='0' cellpadding='0' class='table table-striped'>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto 2 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
			<tr id='archive_${archive.id}'>
				<td><img class='gallery_image' src='/userimages/${website.id}/${archive.image.fileName}'></td>
				<td class='text'>Nombre de la foto 3 ${archive.title}</td>
				<td class='icon'><button class='btn info alternative icon archive edit' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><button class='btn danger alternative icon archive remove' data-uploaderid='archive1' data-itemId='${archive.id}'></button></td>
				<td class='icon'><div class='editImage'><span><img class='archive_up' src='css/images/arrow-up.png'/><img class='archive_down' src='css/images/arrow-down.png'/></span></div></td>
			</tr>
		</table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" >Guardar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->


